<!-- sys-set -->
<template>
    <div class="set-wrapper">
        <el-form id="sp-from">
            <div class="sys-set-item">
                <h3>工区选择</h3>
                <div class="select-wrapper-lar">
                    <el-form-item>
                        <treeselect
                        placeholder="请选择工区"
                        :options="organizations"
                        v-model="organizationId"
                        :normalizer="normalizer"
                        />
                    </el-form-item>
                </div>
            </div>
            <div class="sys-set-item">
                <h3>IP配置(协议、IP、端口)</h3>
                <div class="select-wrapper-line">
                    <div class="select-item select-item1">
                        <el-form-item>
                            <el-select
                            clearable 
                            v-model="protocol" 
                            placeholder="请选择协议">
                                <el-option label="http:" value="http:"></el-option>
                                <el-option label="https:" value="https:"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="select-item select-item2">
                        <el-form-item>
                            <el-input
                            clearable 
                            v-model="ipAdres" 
                            placeholder="请输入IP">
                            </el-input>
                        </el-form-item>
                        
                    </div>
                    <div class="select-item select-item3">
                        <el-form-item>
                            <el-input
                            clearable 
                            v-model="port" 
                            placeholder="请输入端口">
                            </el-input>
                        </el-form-item>
                    </div>
                </div>
            </div>
        </el-form>
        <div 
        @click="handleClick" 
        class="ctrl-btn">
            保存设置
        </div>
    </div>
</template>

<script>
import {
    getAllOrgList
} from '@/apis'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
    name: 'sys-set',
    components: {
        Treeselect
    },
    data () {
        return {
            normalizer(node) {
                return {
                    id: node.organizationId,
                    label: node.name,
                    children: node.children,
                }
            },
            organizations: [],
            organizationId: null,
            protocol: null,
            ipAdres: null,
            port: null
        }
    },
    props: {},
    methods: {
        // 获取所有工区部门树 
        async getAllOrgTree () {
            try {
                let res = await getAllOrgList();
                console.log('获取所有工区部门树', res);
                let {
                    code,
                    msg,
                    data,
                } = res.data;
                if (code == 200) {
                    this.organizations = data;
                } else if (code == -2) {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    })
                    this.$store.commit('CLEAR_LOGIN');
                    this.$router.push('/login').catch({});   
                } else {
                    this.$message({
                        type: 'error',
                        message: `${msg}`
                    });
                }
            } catch(e) {
                console.log('获取所有工区部门树',e)
            }
        },

        // 按钮点击事件
        handleClick () {
           this.$confirm('此操作设置成功后会自动刷新系统界面！', '注意', {
                confirmButtonText: '知道了',
                cancelButtonText: '取消',
                type: 'warning'
           }).then(() => {
                localStorage.setItem('organizationId', this.organizationId);
                localStorage.setItem('_protocol', this.protocol);
                localStorage.setItem('_host', this.ipAdres);
                localStorage.setItem('_port', this.port);
                this.organizationId = null;
                this.protocol = null;
                this.ipAdres = null;
                this.port = null;
                window.location.reload();
                /* setTimeout(() => {
                    this.$message({
                        type: 'success',
                        message: '配置成功!'
                    });
                }, 1200); */
            })
        },

        // 回显值
        fillInValue () {
            this.ipAdres = window.localStorage.getItem('_host') ? window.localStorage.getItem('_host') : 'localhost';
            this.port = window.localStorage.getItem('_port') ? window.localStorage.getItem('_port') : 8861;
            this.protocol = 'https:';
            let orgId = window.localStorage.getItem('organizationId');
            if (!Number(orgId)) {
                this.organizationId = null
            } else {
                this.organizationId = Number(orgId);
            }
            
        }
    },
    created () {
        this.getAllOrgTree();
        this.fillInValue();
    }
}
</script>
<style lang='scss'>
#sp-from {
    .sys-set-item {
        margin-top: 30px;
        h3 {
            font-size: 32px;
            color: #333;
            font-weight: 400;
        }

        .select-wrapper-lar {
            margin-top: 30px; 
            width: 650px;
        }

        .select-wrapper-line {
            width: 100%;
            overflow: hidden;
            margin-top: 30px;
        }
        .select-item {
            float: left;
            margin-right: 25px;
        }
        .select-item1 {
            width: 300px;   
        }

        .select-item2 {
            width: 550px;   
        }

        .select-item3 {
            width: 300px;   
        }

        .el-select {
            width: 100%;
        }

        .el-form-item .el-form-item__content {
            width: 100%!important;
            margin: 0!important;
        }
    }  
}

.ctrl-btn {
    width: 180px;
    height: 58px;
    background: #2683FF;
    line-height: 58px;
    text-align: center;
    font-size: 32px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 80px;
}

</style>